<template>
	<!-- 专题专栏-详情 -->
	<div class="public_content news_content over-h">
		<!--左侧导航区开始-->
		<div class="public_content_left special_slide">
			<ul class="public_nav_vertical">
				<li>
					<div class="public_nav_vertical_title">
						<img src="~@/assets/img/special_title.png" class="po-re top-2m" alt="新闻图标">
						<span class="fcolor-00">专题</span>
					</div>
					<dl class="public_nav_vertical_child">
		                <dd v-for="(item,index) in navList" @click="addClassHandle(index)" :class="{ 'child_click_dd':index==current}">
							<!-- <router-link :to="{path: '/seminar-detail'}"> -->
							<div class="fcolor-99 p-0-20">
								{{ item.name }}<i class="child_click_i"></i>
							</div>	
							<!-- </router-link> -->
		                </dd>                    						       
					</dl>
				</li>
			</ul>    			
		</div>
		<!--左侧导航区结束-->
		<!--右侧内容-->	
		<div class="public_content_right special_content">
			<!--简介区开始-->
			<div class="h-400 hr-s-ffcccd">
				<div class="over-h w-all">
					<img :src="seminarInfo.image" class="di-b center-block" width="100%" :alt="seminarInfo.name">
					<!-- <img src="~@/assets/img/5ad0558815fdd.jpg" class="di-b center-block" width="100%" alt=""> -->
				</div>
				<div class="p-20">
					<p class="fsize-14 fcolor-11 font-bold mt-15" v-html="seminarInfo.name"></p>
					<p class="fsize-14 fcolor-33 mt-10 lh-26" v-html="seminarInfo.description"></p>
				</div>
			</div>
			<div class="seminar_container w-all mt-25">
				<!-- 专题新闻 -->
				<div class="public_card over-h news">
					<div class="public_card_title bg-img-card fcolor-white">
						<span class="fsize-18 pl-15">专题新闻</span> /
						<router-link :to="{path: '/studyCenter'}" class="fcolor-white">更多</router-link>
					</div>
					<ul class="mt-15 over-h" v-if="seminarNews.length > 0">
						<li class="fl mb-10 text-l hr-s-f1f1f1" v-for="(item,index) in seminarNews.slice(0,8)">
							<router-link :to="{path: `/seminar-content/news/${item.id}`}" class="see-details">
								<div class="over-h lh-0">
									<img :src="item.image" class="di-ib w-all" :alt="item.title">
									<!-- <img src="~@/assets/img/5ae9352377a6c.jpg" class="di-ib w-all"> -->
								</div>
								<p class="mt-5 fsize-14 fcolor-33 line-overf lh-20 h-40 text-c" v-html="item.title"></p>
							</router-link>
						</li>
					</ul>
				</div>
				<!-- 专题视频 -->
				<!-- <div class="public_card over-h news">
					<div class="public_card_title bg-img-card fcolor-white">
						<span class="fsize-18 pl-15">专题视频</span> /
						<router-link :to="{path: '/studyCenter'}" class="fcolor-white">更多</router-link>
					</div>
					<ul class="mt-15 over-h" v-if="seminarVideo.length > 0">
						<li class="fl mb-10 text-l hr-s-f1f1f1" v-for="(item,index) in seminarVideo.slice(0,8)">
							<router-link :to="{path: `/seminar-content/video/${item.id}`}" class="see-details">
								<div class="over-h lh-0">
									<img :src="item.image" class="di-ib w-all" :alt="item.title">
								</div>
								<p class="mt-5 fsize-14 fcolor-33 line-overf lh-20 h-40 text-c" v-html="item.title"></p>
							</router-link>
						</li>
					</ul>
				</div> -->				
				<!-- 专题文件 -->
				<div class="public_card over-h news">
					<div class="public_card_title bg-img-card fcolor-white">
						<span class="fsize-18 pl-15">专题文件</span> /
						<router-link :to="{path: '/studyCenter'}" class="fcolor-white">更多</router-link>
					</div>
					<ul class="mt-15 over-h" v-if="seminarFile.length > 0">
						<li class="fl mb-10 text-l hr-s-f1f1f1" v-for="(item,index) in seminarFile.slice(0,8)">
							<router-link :to="{path: `/seminar-content/file/${item.id}`}" class="see-details">
								<div class="over-h lh-0">
									<img :src="item.image" class="di-ib w-all" :alt="item.title">
								</div>
								<p class="mt-5 fsize-14 fcolor-33 line-overf lh-20 h-40 text-c" v-html="item.title"></p>
							</router-link>
						</li>
					</ul>
				</div>
			</div>	
		</div>	
	</div>
</template>

<script>
	import '@/assets/css/common.css';
	export default {
		data() {
			return {
				navList:[], //左侧专题列表
				id:'',
				seminarInfo:{},
				seminarNews:[],
				seminarVideo:[],
				seminarFile:[],
				videoList:[
					{name:'将郑州和三门峡打造成完美城市'},
					{name:'《习近平谈治国理政》第二卷内容速览'},
					{name:'将郑州和三门峡打造成完美城市'},
					{name:'《习近平谈治国理政》第二卷内容速览'},
					{name:'《习近平谈治国理政》第二卷内容速览'}
				],
				current:null   //当前高亮的左侧导航下标
			}
		},
		mounted(){
			this.init()
		},
		methods: {
			init(){
				this.current = 0
				this.$parent.$data.current = 2;
				this.id = this.$route.params.id;
				sessionStorage.setItem('seminarId',this.id);
				this.getSeminarList() 
				this.getSeminarSynopsis()
				// this.getSeminarData(this.id,'news',this.seminarNews)
// 				this.getSeminarData(this.id,'video',this.seminarVideo)
// 				this.getSeminarData(this.id,'file',this.seminarFile)
			},
			//左侧专题列表
			getSeminarList(){
				this.$axios.get(`web/subject/listAll`).then(res => {
					if(res.data && res.data.code === 0){
						this.navList = res.data.data
					}else {
						this.$message.error(res.data.msg)
					}		
				})
			},
			//专题简介
			getSeminarSynopsis(){
				this.$axios.get(`web/subject/getDetailById`,{'subjectId':this.id}).then(res => {
					if(res.data && res.data.code === 0){
						this.seminarInfo = res.data.data
						if(this.seminarInfo.subjectSettingEntities.length>0){
							this.seminarInfo.subjectSettingEntities.map((item)=>{
								if(item.configType == 'news'){
									this.seminarNews = item.relationEntities
								}else if(item.configType == 'file'){
									this.seminarFile = item.relationEntities
								}
							})
						}
					}else {
						this.$message.error(res.data.msg)
					}		
				})
			},
			//专题的新闻、视频、文件
			getSeminarsData(id,type,dataList){
				this.$axios.get(`web/subject/getSettingById`,{'subjectId':id,'configType':type}).then(res => {
					if(res.data && res.data.code === 0){
						dataList = res.data.data
					}else {
						this.$message.error(res.data.msg)
					}		
				})
			}, 
			addClassHandle(index){
				this.current = index
			} 
			
		}
	}
</script>

<style scoped>
	.public_content{
		box-sizing: border-box;
		width: 1200px;
		margin: 10px auto;
		padding: 0 16px;
		margin-bottom: 30px;
		border-radius: 3px;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		padding-top: 16px;
		padding-bottom: 16px;
		background-color: #f8f4eb;
	}
	/* 左侧导航 */
	.public_content_left{
		width: 200px;
		float: left;
		background: #fff;
	}
	.public_nav_vertical{
    box-shadow: 0 0 12px 0 rgba(4, 0, 0, 0.12);
    border: solid 1px rgba(245, 245, 245, 1);
}
.public_nav_vertical li .public_nav_vertical_title{
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    padding: 0 20px;
    font-family: 微软雅黑;
    border-bottom: solid 1px #dfdfdf;
}
.public_nav_vertical dl dd{
    border-bottom: solid 1px #f5f5f5;
    height: 42px;
    line-height: 42px;
    font-size: 14px;
}
.public_nav_vertical dl dd a{
    display: block;
    padding: 0 20px;
    font-weight: 500;
    color: #999;
}
.public_nav_vertical dl dd i{
    float: right;
    margin-top: 16px;
    border-style: solid;
    border-color: transparent transparent transparent transparent;
    border-width: 5px 0 5px 8px;
    text-align: right;
}
.public_nav_vertical_child dd:hover{
    background: rgba(255, 235, 235, .8);
}
.public_nav_vertical_child .child_click_dd{
    background: rgba(255, 235, 235, .8);
}
.child_click_dd .child_click_i{
    border-color: transparent transparent transparent #cc0000;
}
	/*左侧导航结束*/
	/* 右侧内容 */
	.public_content_right{
		width: 960px;
		min-height: 300px;
		box-sizing: border-box;
		padding: 10px;
		float: right;
		background: #fff;
	}
	.seminar_container .news li{
		width: 23%;
		margin-right: 2%;
	}
	.seminar_container .news li:nth-child(4n){
		margin-right: 0;
	}
</style>